<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>

	<!-- css api 目前兼容不是很好，谷歌兼容 -->

	<!-- https://mp.weixin.qq.com/s/yY-VpmJR9uFmzixM8TcOGw -->

	<body>
		<style>
			@property --colorA {
				syntax: '<color>';
				inherits: false;
				initial-value: fuchsia;
			}

			@property --colorC {
				syntax: '<color>';
				inherits: false;
				initial-value: #f79188;
			}

			@property --colorF {
				syntax: '<color>';
				inherits: false;
				initial-value: red;
			}

			div {
				width: 200px;
				height: 200px;
				background: linear-gradient(45deg, var(--colorA), var(--colorC), var(--colorF));
				animation: change 10s infinite linear;
			}

			@keyframes change {
				20% {
					--colorA: red;
					--colorC: #a93ee0;
					--colorF: fuchsia;
				}

				40% {
					--colorA: #ff3c41;
					--colorC: #e228a0;
					--colorF: #2e4c96;
				}

				60% {
					--colorA: orange;
					--colorC: green;
					--colorF: teal;
				}

				80% {
					--colorA: #ae63e4;
					--colorC: #0ebeff;
					--colorF: #efc371;
				}
			}
		</style>
		<div></div>
	</body>
</html>
